<template>
    <div>
        <el-card>
            <el-form :inline="true">
                <el-form-item label="一级分类">
                    <el-select v-model="categoryStore.c1Id" @change="handler1">
                        <el-option v-for="(c1, index) in c1Arr" :key="c1.id" :label="c1.name" :value="c1.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类">
                    <el-select v-model="categoryStore.c2Id" @change="handler2">
                        <el-option v-for="(c2, index) in c2Arr" :key="c2.id" :label="c2.name" :value="c2.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="三级分类">
                    <el-select v-model="categoryStore.c3Id" @change="handler3">
                        <el-option v-for="(c3, index) in c3Arr" :key="c3.id" :label="c3.name" :value="c3.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card style="margin: 10px 0;">
            <div v-show="scene === 0 ? true : false">
                <el-button type="primary" icon="Plus" @click="addattr">增加品台属性</el-button>
                <el-table border style="margin: 10px 0" :data="attrArr">
                    <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                    <el-table-column label="属性名称" align="center" prop="attrName"></el-table-column>
                    <el-table-column label="属性值名称" align="center">
                        <template #="{ row, $index }">
                            <el-tag v-for="(item, index) in row.attrValueList" :key="item.id" style="margin: 3px"> {{
                                item.valueName }}</el-tag>
                            <div> </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #="{ row, $index }">
                            <el-button type="primary" size="default" icon="Edit" @click="updateAttr(row)">编辑</el-button>
                            <el-popconfirm :title="`确定要删除 ${row.attrName} 吗?`" icon="DeleteFilled" icon-color="#f56c6c"
                                @confirm="deleteAttr(row)">
                                <template #reference>
                                    <el-button type="danger" size="small" icon="Delete">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 展示添加和修改属性的结构 -->
            <div v-show="scene === 1 ? true : false">
                <el-form :inline="true">
                    <el-form-item label="属性名称">
                        <el-input placeholder="请输入属性名称" v-model="attrParams.attrName" prefix-icon="EditPen" />
                    </el-form-item>
                </el-form>
                <el-button type="primary" icon="Plus" :disabled="attrParams.attrName.trim().length >= 0 ? false : true"
                    @click="addAttrValue">添加属性值</el-button>
                <el-button type="primary" icon="CloseBold" @click="cancel">取消</el-button>
                <el-table border style="margin:20px 0" :data="attrParams.attrValueList">
                    <el-table-column label="序号" width="80px" type="index" align="center"></el-table-column>
                    <el-table-column label="属性值名称">
                        <template #="{ row, $index }">
                            <el-input v-show="row.flag" @blur="toLook(row, $index)" :ref="(el) => (inputArr[$index] = el)"
                                placeholder="请输入属性值名称" size="small" v-model="row.valueName"></el-input>
                            <div v-show="!row.flag" @click="toEdit(row, $index)">{{ row.valueName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="属性值操作">
                        <template #="{ row, $index }">
                            <el-popconfirm :title="`确定要删除 ${row.valueName} 吗?`" icon="DeleteFilled" icon-color="#f56c6c"
                                @confirm="attrParams.attrValueList.splice($index, 1)">
                                <template #reference>
                                    <el-button type="danger" size="small" icon="Delete" />
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="primary" size="default" @click="save"
                    :disabled="attrParams.attrValueList.length > 0 ? false : true">
                    保存
                </el-button>
                <el-button type="primary" size="default" @click="cancel">
                    取消
                </el-button>
            </div>
        </el-card>
    </div>
</template>
<script setup>
import { getcategoryone, getcategorytwo, getcategorythree, getattrInfoList, addOrUpdateAttrAPI, dltAttr } from '@/api/product/attr/index.js'
import { onMounted, ref, reactive, watch, nextTick } from 'vue'
onMounted(() => {
    getcategory1()
})
const scene = ref(0)
let c1Arr = ref([])
let c2Arr = ref([])
let c3Arr = ref([])
let inputArr = ref([])
let categoryStore = reactive({
    c1Id: '',
    c2Id: '',
    c3Id: ''
})
let attrArr = ref([])
// 收集新增或修改属性的数据
let attrParams = reactive({
    attrName: '',
    attrValueList: [],
    categoryId: '',
    categoryLevel: 3
})
let flag = ref(true)
watch(() => categoryStore.c3Id, () => {
    if (categoryStore.c3Id) return
    getAttr()
})
const getcategory1 = () => {
    getcategoryone().then(res => {
        if (res.code == 200) {
            c1Arr.value = res.data
        }
    })
}
const handler1 = () => {
    getcategorytwo(categoryStore.c1Id).then(res => {
        if (res.code == 200) {
            c2Arr.value = res.data
        }
    })
}
const handler2 = () => {
    getcategorythree(categoryStore.c2Id).then(res => {
        if (res.code == 200) {
            c3Arr.value = res.data
        }
    })
}
const handler3 = () => {
    const { c1Id, c2Id, c3Id } = categoryStore
    getattrInfoList(c1Id, c2Id, c3Id).then(res => {
        console.log(res);
        if (res.code == 200) {
            attrArr.value = res.data
        }

    })

}
const getAttr = () => {
    const { c1Id, c2Id, c3Id } = categoryStore
    getattrInfoList(c1Id, c2Id, c3Id).then(res => {
        if (res.code == 200) {
            attrArr.value = res.data
        }
    })
}
// 增加
const addattr = () => {
    // 每一次点击的时候先清空数据
    Object.assign(attrParams, {
        attrName: '',
        attrValueList: [],
        categoryId: categoryStore.c3Id,
        categoryLevel: 3
    })
    scene.value = 1
}
// 修改
const updateAttr = (row) => {
    console.log(222);
    scene.value = 1
    Object.assign(attrParams, JSON.parse(JSON.stringify(row)))
}
const addAttrValue = () => {
    attrParams.attrValueList.push({
        valueName: '',
        flag: true
    })
}
// 删除
const deleteAttr = (row) => {
    // console.log(row);
    dltAttr(row.id).then(res => {
        if (res.code === 200) {
            handler3()
            ElMessage.success(res.message)
        } else {
            ElMessage.error(res.message)
        }
    })
}
// 取消
const cancel = () => {
    scene.value = 0
}
const save = () => {
    console.log(222);
    addOrUpdateAttrAPI(attrParams).then(res => {
        if (res.code === 200) {
            handler3()
            scene.value = 0
            ElMessage.success(res.message)
        } else {
            ElMessage.error(res.message)
        }
    })
}
const toLook = (row, $index) => {
    // 非法清空判断1
    if (row.valueName.trim() === '') {
        attrParams.attrValueList.splice($index, 1)
        return ElMessage.warning('属性值不能为空')
    }
    // 非法清空判断2
    let repeat = attrParams.attrValueList.find(item => item !== row && item.valueName === row.valueName)
    if (repeat) {
        attrParams.attrValueList.splice($index, 1)
        return ElMessage.warning('属性值不能重复')
    }

    row.flag = false
}
const toEdit = (row, $index) => {
    console.log(row, $index);
    row.flag = true
    nextTick(() => {
        inputArr.value[$index].focus()
    })
}
</script>
<style lang="scss">
.demo-form-inline {
    display: flex;
    height: 100%;
    background: red;
    align-items: center;
}
</style>